import axios, { type Method } from 'axios'
import { getLocalToken } from './auth'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

const service = axios.create({
  baseURL: 'https://api-hmzs.itheima.net/tj',
  timeout: 10000,
})

// 请求拦截器 - 携带token
service.interceptors.request.use(
  config => {
    const token = getLocalToken()
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  },
)

// 响应拦截器 - 数据剥离 + 处理异常
service.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 处理token失效的问题
    if (error.response.status === 401) {
      // 1. token清除
      const userStore = useUserStore()
      userStore.clearToken()
      // 2. 拦截到登录页
      const router = useRouter()
      router.push('/login')
      // 3. 提示用户
      return ElMessage.error('用户身份已过期, 请重新登录')
    }
    ElMessage.error(error.response.data.msg || '请求异常')
    return Promise.reject(error)
  },
)

// 封装请求工具函数
// 请求地址 
// 请求方式

type Data<T> = {
  code: number
  msg: string
  data: T
}

// 查询参数 / 请求体
const request =<T>(url: string, method: Method, submitData?: object) => {
  return service.request<T, Data<T>>({
    url,
    method,
    // 如果是get请求, 键是params,其他一律是data
    [ method.toLowerCase() === 'get' ? 'params' : 'data' ]: submitData
  })
}

export { request }

 
export default service
